रेस्पॉन्सिव लेआउट बनाना वेब डेवलपर्स के लिए एक आम चुनौती है। इस ब्लॉग में, हम यह पता लगाएंगे कि विभिन्न सीएसएस तकनीकों का उपयोग करके एक विशिष्ट प्रतिक्रियाशील डिज़ाइन कैसे प्राप्त किया जाए, इस बात पर ध्यान केंद्रित करते हुए कि सीएसएस ग्रिड इस विशेष लेआउट के लिए सबसे अच्छा तरीका क्यों है।

चुनौती

हमें एक लेआउट बनाने की आवश्यकता है जहां:

डेस्कटॉप दृश्य:

• DIV 1 और DIV 3 बाईं ओर लंबवत खड़े हैं, प्रत्येक बाएं कॉलम का 50% हिस्सा लेते हैं।
• DIV 2 दाएँ कॉलम की पूरी ऊँचाई लेता है।

मोबाइल दृश्य:

• तीनों डिव लंबवत रूप से ढेर हो जाते हैं।

फ्लेक्सबॉक्स छोटा क्यों पड़ता है?

फ्लेक्सबॉक्स एक-आयामी लेआउट के लिए उत्कृष्ट है लेकिन हमारे जैसे जटिल दो-आयामी लेआउट के साथ संघर्ष करता है। उसकी वजह यहाँ है:

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
}

.item:nth-child(2) {
    flex: 1 1 50%;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

फ्लेक्सबॉक्स से जुड़ी समस्याएं

इस फ्लेक्सबॉक्स सेटअप में:

• DIV 2, DIV 1 और DIV 3 की संयुक्त ऊँचाई से मेल खाने के लिए अपनी ऊँचाई को स्वचालित रूप से समायोजित नहीं कर सकता।
• फ्लेक्सबॉक्स मुख्य रूप से एक-आयामी लेआउट (या तो पंक्ति या स्तंभ) के लिए है, जटिल दो-आयामी व्यवस्था के लिए नहीं।

सीएसएस ग्रिड समाधान

सीएसएस ग्रिड द्वि-आयामी लेआउट बनाने में उत्कृष्ट है, जो इसे इस चुनौती के लिए एकदम सही बनाता है।

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}

स्पष्टीकरण

ग्रिड लेआउट:

• दो कॉलम और दो पंक्तियों के साथ एक ग्रिड को परिभाषित करता है।
• पहले कॉलम और पहली पंक्ति में स्थिति DIV 1।
• दो पंक्तियों में फैले दूसरे कॉलम में स्थिति DIV 2।
• पहले कॉलम और दूसरी पंक्ति में स्थिति DIV 3।

उत्तरदायी आकार:

• 768px या संकरी स्क्रीन के लिए, लेआउट आइटम को लंबवत रूप से स्टैक करते हुए फ्लेक्स पर स्विच हो जाता है।

निष्कर्ष

जबकि फ्लेक्सबॉक्स सरल, एक-आयामी लेआउट के लिए बहुत अच्छा है, सीएसएस ग्रिड अधिक जटिल, दो-आयामी डिजाइनों के लिए आवश्यक शक्ति और लचीलापन प्रदान करता है। सीएसएस ग्रिड का उपयोग करके, हम न्यूनतम कोड और अधिकतम नियंत्रण के साथ वांछित उत्तरदायी लेआउट आसानी से प्राप्त कर सकते हैं।

बेझिझक इस उदाहरण को अपनी परियोजनाओं के अनुरूप अनुकूलित करें, और अपने प्रतिक्रियाशील लेआउट के लिए सीएसएस ग्रिड का उपयोग करने के लाभों का आनंद लें!